<!--
案例：正反面
    - 避免文字颠倒，反面盒子先转180度
        backface-visibility: hidden;  背面是否可见，默认visible
    - 利用定位，正反盒子重叠一起
        1）默认声明靠后的html标签后来居上，在最上层显示
            可以改动声明顺序，改变上层显示
        2）利用叠放次序，设置上层显示
            z-index越大越上层
        3）利用3D的z轴，设置前后位置
            缺点是会有位置差，但设置小一点应该没事
        最推崇方式2）。
-->
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    border-radius: 50%;
    transition: all 2s;
    /* 子元素需要透视与三维环境，否则背面无法被遮掩（元素被遮掩是3D环境中才有的效果） */
    perspective: 400px;
    transform-style: preserve-3d;
  }
  .box:hover {
    /* 这里虽然是3D旋转，但对于本需求来说，不需要给父盒子设置透视和三维环境，那些子元素才需要 */
    transform: rotateY(180deg);
  }
  .front,
  .back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    line-height: 100px;
    text-align: center;
    border-radius: 50%;
    /* 背面不可见 */
    backface-visibility: hidden;
  }
  .front {
    /* 正面应该处在最上层 */
    /* 利用z轴结合背面不可见属性调试一下，观察效果 */
    /* transform: translateZ(50px); */
    z-index: 99;
    background-color: rgb(219, 98, 46);
  }
  .back {
    background-color: rgb(231, 209, 97);
    /* 背面预先翻转 */
    transform: rotateY(-180deg);
  }
</style>

<div class="box">
  <!-- 重叠时：会发生后来居上。将正面html写在后面，或者添加z-index，或者添加translateZ() -->
  <div class="front">hello</div>
  <div class="back">world</div>
</div>
